<!--
 * @Author: sjt
 * @Date: 2022-10-25 13:18:12
 * @LastEditors: sjt
 * @LastEditTime: 2024-05-17 14:13:32
 * @Description: file content
-->
<template>
  <div class="barsChart" ref="barsChartRef"></div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import * as echarts from 'echarts'
let charts = null
const barsChartRef = ref(null)
const initChart = (datas) => {
  let max = Math.max.apply(
    null,
    datas.map((item) => item.value)
  )
  let xAxis = datas.map((item) => item.name)
  let colors = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#0B79D7' },
      { offset: 1, color: '#028BFF' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#00956E' },
      { offset: 1, color: '#0DBE90' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#CC872A' },
      { offset: 1, color: '#FDC251' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#C4352A' },
      { offset: 1, color: '#D65349' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#5067D3' },
      { offset: 1, color: '#6279E1' }
    ])
  ]
  let option = {
    grid: {
      containLabel: true,
      bottom: '5%',
      top: '10%',
      left: 30,
      right: 30
    },
    xAxis: {
      triggerEvent: true,
      data: xAxis,
      axisLabel: {
        show: true,
        fontSize: 14,
        margin: 24,
        color: '#C7DFFC',
        align: 'center',
        rotate: -20
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: true,
        lineStyle: {
          show: true,
          color: '#009AFE',
          width: 1
        }
      }
    },
    yAxis: [
      {
        axisLabel: {
          interval: 0,
          show: true,
          fontSize: 14,
          color: '#C7DFFC'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'solid',
            color: 'rgba(0, 154, 254, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '年龄',
        type: 'pictorialBar',
        legendHoverLink: false,
        symbolRepeat: 'true',
        symbolMargin: '100%',
        symbolClip: true,
        symbol: 'rect',
        symbolSize: [16, 4],
        itemStyle: {
          color: ({ dataIndex }) => {
            return colors[dataIndex]
          }
        },
        data: datas.map((item, idx) => {
          return item.value
        }),
        z: 1
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolRepeat: 'fixed',
        symbolMargin: '100%',
        symbol: 'rect',
        symbolSize: [16, 4],
        itemStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        },
        label: {
          show: false
        },
        data: new Array(datas.length).fill(0),
        z: 0
      },
      {
        itemStyle: {
          show: false,
          color: 'transparent',
          opacity: 0 //透明度
        },
        showBackground: true,
        data: new Array(datas.length).fill(max), //这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
        barWidth: '50%',
        itemStyle: {
          color: 'rgba(0,0,0,0.1)',
          borderColor: 'rgba(199, 223, 252, 0.2)',
          borderWidth: 2,
          borderRadius: [5, 5, 0, 0]
        },
        z: 0,
        tooltip: {
          show: false,
          trigger: 'axis',
          type: 'none'
        },
        type: 'bar'
      }
    ]
  }

  if (!charts) {
    charts = echarts.init(barsChartRef.value)
    charts.setOption(option)
  } else {
    charts.dispose()
    charts = echarts.init(barsChartRef.value)
    charts.setOption(option)
  }
  window.addEventListener('resize', () => {
    if (charts) {
      charts.resize()
    }
  })
}

defineExpose({
  initChart
})
</script>

<style lang="scss" scoped>
.barsChart {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: 100% 95%;
}
</style>
